<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title> yukari world</title>
<link rel = "Shortcut Icon" href="${rc.contextPath}/images/timg.jpeg">
<link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/app/douyu/css/page/room-normal/app-all.css?nv=7.945" />
<link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/app/douyu/css/common.css?nv=7.945" />
<link rel="stylesheet" type="text/css" href="https://shark.douyucdn.cn/shark/lib/css/base/1.0/base.css?160114" />
<script src="${rc.contextPath}/js/jquery-3.1.1.js"></script>
<script src="${rc.contextPath}/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/bootstrap/css/bootstrap.min.css" />
<style>
body{
	font-size:12px;
	line-height:18px;
}
tr{height:100px;}
.liwu-style-0{
	height:20px;
}
.liwu-style-10{
	height:60px;
}
.liwu-style-1{
	height:60px;
}
.liwu-style-2{
	height:60px;
}
.liwu-style-3{
	height:60px;
}
.liwu-style-5{
	height:100px;
}
.liwu-style-6{
	height:110px;
}
</style>
</head>
<body>
	<div class="btn btn-danger btn-sm" onClick="closeAll()">关闭所有</div>
<table id="liwuTable">
	<#list list as liwu>
	<tr id="${liwu.id?c}" class="liwu-style-${liwu.liwuStyle.style}">
		<td style="vertical-align:bottom;width:350px;">
			<div class="giftbatter-item giftbatter-item-left item-${liwu.liwuStyle.style}" style="left: 0px">
				<div class="item-back item-back-${liwu.liwuStyle.style}">
					<img src="${liwu.liwuStyle.bimg}">
				</div>
				<#if liwu.liwuStyle.style??>
				<div class="item-head item-head-${liwu.liwuStyle.style}" style="border-color: ${liwu.liwuStyle.bgrb!};">
					<img src="${liwu.liwuStyle.himg!}">
				</div>
				</#if>
				<div class="item-name item-name-${liwu.liwuStyle.style}" style="color: ${liwu.liwuStyle.urgb!};">${liwu.name}</div>
				<div class="item-gift item-gift-${liwu.liwuStyle.style} clearfix">
					<span class="fl" style="color: ${liwu.liwuStyle.drgb!};">送出</span>
					<span class="fr" style="color:${liwu.liwuStyle.grgb!};">${liwu.liwuStyle.name}</span>
				</div>
				<div class="item-bat item-bat-${liwu.liwuStyle.style}"></div>
				<div class="item-count item-count-${liwu.liwuStyle.style} clearfix"  hits="${liwu.hits?c}">
					<div class="nbox">
					<#list liwu.hitList as hit>
						<span class="n n${hit}"></span>
					</#list>
					</div>
				</div>
			</div>
		</td>
		<td style="vertical-align:middle;">
			<div  id="time-${liwu.id?c}">${liwu.giveTime?string("yyyy-MM-dd HH:mm:ss")}</div>
		</td>
		<td style="vertical-align:top;">
			<div class="glyphicon glyphicon-remove" style="color:red;cursor:pointer;" onClick="closeOne(${liwu.id?c})"></div>
		</td>
	</tr>
	</#list>
</table>
</body>
<script>
var showFlag = true;
function showLiwu(){
	$.ajax({
		'url':'${rc.contextPath}/douyu/getLiwu',
		'dataType':'json',
		'type': 'POST',
		'success':function(data){
			if (showFlag){
				for(var i=data.length-1;i>=0;i--){
					addTr(data);
				}
				showFlag = false;
			} else {
				for(var i=0;i<data.length;i++){
					addTr(data);
				}
			}
		}
	});
}

function addTr(data){
	var tr = $("#"+data[i].id);
				if (tr.length == 0){
					tr = $('<tr id="'+data[i].id+'" class="liwu-style-'+data[i].liwuStyle.style+'"></tr>')
					var td_1 = $('<td style="vertical-align:bottom;width:350px;"></td>');
					var div_p = $('<div class="giftbatter-item giftbatter-item-left item-'+data[i].liwuStyle.style+'" style="left: 0px"></div>');
					var div_1 = $('<div class="item-back item-back-'+data[i].liwuStyle.style+'"><img src="'+data[i].liwuStyle.bimg+'"></div>');
					div_p.append(div_1);
					if (data[i].liwuStyle.himg != null){
						var div_2 = $('<div class="item-head item-head-'+data[i].liwuStyle.style+'" style="border-color: '+data[i].liwuStyle.brgb+';"><img src="'+data[i].liwuStyle.himg+'"></div>');
						div_p.append(div_2);
					}
					var div_3 = $('<div class="item-name item-name-'+data[i].liwuStyle.style+'" style="color: '+data[i].liwuStyle.urgb+';">'+data[i].name+'</div>');
					div_p.append(div_3);
					var div_4 = $('<div class="item-gift item-gift-'+data[i].liwuStyle.style+' clearfix"><span class="fl" style="color: '+data[i].liwuStyle.drgb+';">送出</span><span class=" fr" style="color: '+data[i].liwuStyle.grgb+';">'+data[i].liwuStyle.name+'</span></div>');
					div_p.append(div_4);
					var div_5 = $('<div class="item-bat item-bat-'+data[i].liwuStyle.style+'"></div>');
					div_p.append(div_5);
					var div_6 = $('<div class="item-count item-count-'+data[i].liwuStyle.style+' clearfix"  hits="'+data[i].hits+'"></div>');
					div_6.append(showHits(data[i].hits));
					div_p.append(div_6);
					td_1.append(div_p);
					tr.append(td_1);
					tr.append($('<td style="vertical-align:middle;""><div id="time-'+data[i].id+'">'+formatDate(data[i].giveTime)+'</div></td>'));
					tr.append($('<td style="vertical-align:top;"><div class="glyphicon glyphicon-remove" style="color:red;cursor:pointer;" onClick="closeOne('+data[i].id+')"></div></td>'));
					$("#liwuTable").prepend(tr);
				} else {
					var itemCount = tr.find(".item-count")
					if (itemCount.attr("hits") != data[i].hits){
						itemCount.attr("hits",data[i].hits);
						itemCount.html(showHits(data[i].hits));
						$("#time-"+data[i].id).text(formatDate(data[i].giveTime));
						$("#liwuTable").prepend(tr);
					} else {
						return;
					}
				}
}


function closeLiwu(data){
	$.ajax({
		'url':'${rc.contextPath}/douyu/closeLiwu',
		'data':$.param(data,true),
		'dataType':'json',
		'type': 'POST',
		'async': false,
		'success':function(message){
			return message.code;
		}
	});
}

function closeOne(id){
	var json = {"ids":[id]};
	closeLiwu(json);
	$("#"+id).remove();
}

function closeAll(){
	var trs = $("#liwuTable").find("tr");
	var json = {"ids":[]};
	for(i=0;i<trs.length;i++){
		var id = $(trs[i]).attr("id");
		if (id != 0){
			json.ids[json.ids.length]=id;
		}
	}
	closeLiwu(json);
	location = location;
}

function showHits(hits){
	var div = $('<div  class="nbox"></div>');
	while (hits >= 1){
		var n = hits % 10;
		div.prepend($('<span class="n n'+n+'"></span>'));
		hits = parseInt(hits / 10);
	}
	return div;
}

function  formatDate(now)   {      
	var now= new Date(now);     
	var year=now.getFullYear();     
	var month=now.getMonth()+1;     
	var date=now.getDate();     
	var hour=now.getHours();      
	var minute=now.getMinutes();     
	var second=now.getSeconds();      
	return  year+"-"+buling(month)+"-"+buling(date)+" "+buling(hour)+":"+buling(minute)+":"+buling(second); 
}
function buling(a){
	if (a.length == 1){
		return "0"+a;
	} else {
		return a;
	}
}



setInterval("showLiwu()",1000);

</script>